<template>
<q-dialog class="box-bind-dialog dialog" v-model="show" persistent>
  <q-card style="min-width: 400px" class="box-bind-card">
    <q-card-section class="dialog-title bg-primary">
      <div class="text-center text-white">盒子绑定</div>
    </q-card-section>
    <q-form @submit="submit" class="q-gutter-md dialog-content">
      <q-card-section>
        <q-input v-model="boxId" autofocus outlined dense
                 :rules="[val => val && val.length > 0 || '请填写盒子ID']">
          <template v-slot:before>
            <label class="text-right name"><span class="text-red">*</span> 盒子ID:</label>
          </template>
        </q-input>
        <q-input v-model="boxModel" outlined dense
                 :rules="[]">
          <template v-slot:before>
            <label class="text-right name">盒子型号:</label>
          </template>
        </q-input>
        <q-field class="field" dense borderless no-error-icon v-model="deployedDate"
          :rules="[val => val && val.length > 0 || '请选择部署日期']">
          <template v-slot:prepend>
            <label class="text-right name">
              <span class="text-red">*</span>
              部署日期:
            </label>
          </template>
          <date-picker style="width: 100%" v-model="deployedDate" value-type="format"></date-picker>
        </q-field>
        <q-input v-model="customerManagers" outlined dense
                 :rules="[]">
          <template v-slot:before>
            <label class="text-right name">客户经理:</label>
          </template>
        </q-input>
        <q-input v-model="factoryBroker" outlined dense :rules="[]">
          <template v-slot:before>
            <label class="text-right name">工厂接口人:</label>
          </template>
        </q-input>
      </q-card-section>
      <q-separator />
      <q-card-actions align="center" class="dialog-footer text-center margin-t-10">
        <q-btn outline color="primary" label="取消" @click="hideDialog" class="q-mr-md"/>
        <q-btn unelevated color="primary" label="确认" type="submit" :loading="submitting"/>
      </q-card-actions>
    </q-form>
  </q-card>
</q-dialog>
</template>

<script>
import { date } from 'quasar'
export default {
  name: 'box-bind',
  data () {
    return {
      show: false,
      boxId: '', // 盒子id
      boxModel: '', // 盒子型号
      deployedDate: '', // 部署时间
      customerManagers: '', // 客户经理
      factoryBroker: '', // 工厂接口人
      deviceId: '', // 设备id
      submitting: false
    }
  },
  methods: {
    showDialog (item) {
      this.initInfo(item)
      this.show = true
    },
    hideDialog () {
      this.show = false
      this.submitting = false
    },
    initInfo (info) {
      console.log(info)
      this.boxId = info.boxID
      this.boxModel = info.boxModel
      this.deployedDate = info.deployedDate || date.formatDate(Date.now(), 'YYYY-MM-DD')
      this.customerManagers = info.customerManagers
      this.factoryBroker = info.factoryBroker
      this.deviceId = info.id
      console.log(this.deployedDate)
    },
    submit () {
      const data = {
        boxId: this.boxId,
        boxModel: this.boxModel,
        deployedDate: this.deployedDate,
        customerManagers: this.customerManagers,
        factoryBroker: this.factoryBroker
      }

      this.submitting = true
      this.$emit('submit', data, this.deviceId)
    }
  }
}
</script>

<style scoped lang="stylus">
.name{
  width 85px
}
</style>
